<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实时工资计算器</title>
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        overflow: hidden;
        font-family: "Orbitron", sans-serif;
        background: #1b003a;
        color: #ffd700;
      }
      #bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      #mainDisplay {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .row {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .earnings {
        font-size: 10rem;
        font-weight: 700;
        color: #ffd700;
        text-shadow: 0 0 20px #ffd700;
        position: fixed;
        top: 8rem;
      }
      .grid {
        display: flex;
        width: 100%;
        position: fixed;
        bottom: 0;
      }
      .grid .item {
        height: 10rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 2px solid rgba(255, 215, 0, 0.3);
        border-right: none;
      }
      .grid .item:last-child {
        border-right: 2px solid rgba(255, 215, 0, 0.3);
      }
      .item .label {
        font-size: 1.2rem;
        margin-bottom: 5px;
        color: #ffd700;
      }
      .item .value {
        font-size: 3rem;
        font-weight: 700;
        color: #ffd700;
        text-shadow: 0 0 10px #ffd700;
        width: 200px;
        white-space: nowrap;
        text-align: center;
      }
      #gear {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background: rgba(27, 0, 58, 0.7);
        border: 2px solid #ffd700;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
      }
      #gear:after {
        content: "⚙️";
        font-size: 1.5rem;
        color: #ffd700;
      }
      #settingsModal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(27, 0, 58, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 3;
      }
      #settingsModal h2 {
        color: #ffd700;
        margin-bottom: 20px;
        font-size: 2rem;
      }
      .input-group {
        position: relative;
        margin: 12px 0;
      }
      .input-group input {
        padding: 10px;
        font-size: 1.2rem;
        border: 2px solid #ffd700;
        background: transparent;
        color: #ffd700;
        outline: none;
        width: 260px;
      }
      #unitBtn {
        padding: 10px;
        font-size: 1.2rem;
        border: 2px solid #ffd700;
        background: transparent;
        color: #ffd700;
        width: 260px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
      }
      .dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 260px;
        background: rgba(27, 0, 58, 0.9);
        border: 2px solid #ffd700;
        border-radius: 5px;
        display: none;
        flex-direction: column;
        z-index: 4;
      }
      .dropdown div {
        padding: 10px;
        cursor: pointer;
        text-align: center;
        color: #ffd700;
      }
      .dropdown div:hover {
        background: rgba(255, 0, 255, 0.1);
      }
      #saveBtn {
        margin-top: 30px;
        padding: 12px 30px;
        font-size: 1.2rem;
        background: #ffd700;
        color: #1b003a;
        border: none;
        cursor: pointer;
      }
      canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <canvas id="bg"></canvas>
    <div id="particles-js"></div>
    <div id="mainDisplay">
      <div class="row">
        <div class="earnings">
          <span id="earned">0.00</span>
        </div>
      </div>
      <div class="row grid">
        <div class="item">
          <div class="label">已上班时长</div>
          <div class="value" id="worked">00:00:00</div>
        </div>
        <div class="item">
          <div class="label">下班倒计时</div>
          <div class="value" id="countdown">00:00:00</div>
        </div>
        <div class="item">
          <div class="label">每秒收入</div>
          <div class="value">
            <span id="perSec">0.00</span><span id="unitPer">元/秒</span>
          </div>
        </div>
      </div>
    </div>
    <div id="gear"></div>
    <div id="settingsModal">
      <h2>工作信息设置</h2>
      <div class="input-group">
        <input type="number" id="salary" placeholder="月薪" />
      </div>
      <div class="input-group">
        <input type="number" id="days" placeholder="月工作天数" />
      </div>
      <div class="input-group"><input type="time" id="start" /></div>
      <div class="input-group"><input type="time" id="end" /></div>
      <div class="input-group">
        <button id="unitBtn">单位: 元 ▼</button>
        <div class="dropdown" id="unitDropdown">
          <div data-val="1">元</div>
          <div data-val="10">角</div>
          <div data-val="100">分</div>
        </div>
      </div>
      <button id="saveBtn">保存</button>
    </div>
    <script>
      const canvas = document.getElementById("bg"),
        ctx = canvas.getContext("2d");
      let w,
        h,
        t = 0;
      function resize() {
        w = canvas.width = innerWidth;
        h = canvas.height = innerHeight;
      }
      window.onresize = resize;
      resize();
      function drawWave() {
        ctx.fillStyle = "#1b003a";
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "#ffd700";
        ctx.lineWidth = 2;
        ctx.beginPath();
        for (let x = 0; x <= w; x++) {
          const y =
            h / 1.75 +
            Math.sin((x + t) * 0.02) * 50 +
            Math.sin((x + t * 0.5) * 0.04) * 30;
          if (x === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        }
        ctx.stroke();
        t += 2;
        requestAnimationFrame(drawWave);
      }
      drawWave();

      particlesJS("particles-js", {
        particles: {
          number: {
            value: 80,
            density: { enable: true, value_area: 800 },
          },
          color: { value: "#ffd700" },
          shape: {
            type: "circle",
            stroke: { width: 0, color: "#000" },
          },
          opacity: {
            value: 0.5,
            random: true,
            anim: { enable: true, speed: 1, opacity_min: 0.1 },
          },
          size: {
            value: 5,
            random: true,
            anim: { enable: false, speed: 40, size_min: 0.1 },
          },
          line_linked: {
            enable: true,
            distance: 150,
            color: "#ffd700",
            opacity: 0.4,
            width: 1,
          },
          move: {
            enable: true,
            speed: 6,
            direction: "none",
            random: true,
            straight: false,
            out_mode: "out",
            bounce: false,
          },
        },
        interactivity: {
          detect_on: "canvas",
          events: {
            onhover: { enable: true, mode: "repulse" },
            onclick: { enable: true, mode: "push" },
            resize: true,
          },
        },
        retina_detect: true,
      });

      const gear = document.getElementById("gear");
      const modal = document.getElementById("settingsModal");
      const salaryEl = document.getElementById("salary");
      const daysEl = document.getElementById("days");
      const startEl = document.getElementById("start");
      const endEl = document.getElementById("end");
      const unitBtn = document.getElementById("unitBtn");
      const dropdown = document.getElementById("unitDropdown");
      const saveBtn = document.getElementById("saveBtn");

      const earnedEl = document.getElementById("earned");
      const workedEl = document.getElementById("worked");
      const countdownEl = document.getElementById("countdown");
      const perSecEl = document.getElementById("perSec");
      const unitPer = document.getElementById("unitPer");

      let salary = 0,
        days = 0,
        startT = 0,
        endT = 0,
        rate = 0,
        tempUnit = 1,
        unitFactor = 1;

      unitBtn.onclick = () => {
        dropdown.style.display =
          dropdown.style.display === "flex" ? "none" : "flex";
      };
      dropdown.querySelectorAll("div").forEach((opt) => {
        opt.onclick = () => {
          tempUnit = +opt.dataset.val;
          unitBtn.textContent = `单位: ${opt.textContent} ▼`;
          dropdown.style.display = "none";
        };
      });

      function loadSettings() {
        const data = localStorage.getItem("wsCalc");
        if (data) {
          const o = JSON.parse(data);
          salary = o.salary;
          days = o.days;
          startT = o.start;
          endT = o.end;
          unitFactor = o.unit;
          salaryEl.value = salary;
          daysEl.value = days;
          startEl.value = o.startStr;
          endEl.value = o.endStr;
          const txt = unitFactor === 1 ? "元" : unitFactor === 10 ? "角" : "分";
          unitBtn.textContent = `单位: ${txt} ▼`;
          unitPer.textContent = `${txt}/秒`;
          rate = salary / (days * ((endT - startT) / 3600));
          modal.style.display = "none";
        }
      }

      saveBtn.onclick = () => {
        salary = +salaryEl.value;
        days = +daysEl.value;
        const [sh, sm] = startEl.value.split(":").map(Number);
        const [eh, em] = endEl.value.split(":").map(Number);
        startT = sh * 3600 + sm * 60;
        endT = eh * 3600 + em * 60;
        rate = salary / (days * ((endT - startT) / 3600));
        unitFactor = tempUnit;
        const txt = unitFactor === 1 ? "元" : unitFactor === 10 ? "角" : "分";
        unitPer.textContent = `${txt}/秒`;
        localStorage.setItem(
          "wsCalc",
          JSON.stringify({
            salary,
            days,
            start: startT,
            end: endT,
            startStr: startEl.value,
            endStr: endEl.value,
            unit: unitFactor,
          })
        );
        modal.style.display = "none";
      };

      gear.onclick = () => {
        dropdown.style.display = "none";
        modal.style.display = "flex";
      };

      function fmt(n) {
        return String(n).padStart(2, "0");
      }
      function formatTime(s) {
        return [Math.floor(s / 3600), Math.floor((s % 3600) / 60), s % 60]
          .map(fmt)
          .join(":");
      }

      function tick() {
        const now = new Date();
        const secs =
          now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
        let earned = 0;
        if (secs > startT && secs < endT) {
          earned = rate * ((secs - startT) / 3600);
        } else if (secs >= endT) {
          earned = rate * ((endT - startT) / 3600);
        }
        earnedEl.textContent = (earned * unitFactor).toFixed(2);
        const workedSecs = secs > startT ? Math.min(secs, endT) - startT : 0;
        workedEl.textContent = formatTime(workedSecs);
        const left = Math.max(0, endT - secs);
        countdownEl.textContent = formatTime(left);
        perSecEl.textContent = ((rate / 3600) * unitFactor).toFixed(2);
        requestAnimationFrame(tick);
      }

      loadSettings();
      tick();
    </script>
  </body>
</html>
